'use strict'
const path = require('path')
const defaultSetting = require('./src/setting')
// 引入打包分析插件  不需要的时候注释掉
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
// gzip压缩代码 使用存在问题
// const CompressionWebpackPlugin = require('compression-webpack-plugin')

function resolve(dir) {
  return path.join(__dirname, dir)
}

const name = defaultSetting.title || 'vue-next element-plus admin'

const port = process.env.port || process.env.npm_config_port || 9875

module.exports = {
  // publicPath: '/',
  publicPath: process.env.NODE_ENV === 'production' ? '/vue-next-element-plus-admin/' : '/', // gitee page 使用打包  此时不能开始history模式
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: process.env.NODE_EVN === 'development', // 生产构建时禁用 eslint-loader
  productionSourceMap: false, // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
  devServer: {
    port: port,
    open: true,
    overlay: {
      warning: false,
      error: true
    },
    before: require('./mock/mock-server')
  },
  /**
     * 如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中。
     * 如果这个值是一个函数，则会接收被解析的配置作为参数。该函数既可以修改
     * 配置并不返回任何东西，也可以返回一个被克隆或合并过的配置版本。
     */
  configureWebpack: {
    // 在webpack的name字段中提供应用程序的标题，以便
    // 可以在中访问索引.html插入正确的标题。
    name: name,
    resolve: {
      alias: {
        '@': resolve('src'),
        'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js'// 去除vue-i18n的编译警告
      }
    }
  },
  /**
     * 是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。
     * 允许对内部的 webpack 配置进行更细粒度的修改。
     */
  chainWebpack(config) {
    // 添加打包分析文件
    config.when(process.env.NODE_ENV !== 'development', config => config.plugin('webpack-bundle-analyzer').use(BundleAnalyzerPlugin))

    // config.module
    //   .rule('vue')
    //   .use('vue-loader')
    //   .loader('vue-loader')
    //   .tap((options) => {
    //     options.compilerOptions = {
    //       ...(options.compilerOptions || {}),
    //       isCustomElement: (tag) => /^SidebarItem/.test(tag)
    //     }
    //     return options
    //   })

    // 它可以提高第一屏的速度，建议开启预加载
    config.plugin('preload').tap(() => [
      {
        rel: 'preload',
        // to ignore runtime.js
        // https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
        fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
        include: 'initial'
      }
    ])
    // config.plugins.push(
    //   new CompressionWebpackPlugin(
    //     {
    //       filename: info => {
    //         return `${info.path}.gz${info.query}`
    //       },
    //       algorithm: 'gzip',
    //       threshold: 10240, // 只有大小大于该值的资源会被处理 10240
    //       test: new RegExp('\\.(' + ['js'].join('|') + ')$'
    //       ),
    //       minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
    //       deleteOriginalAssets: false // 删除原文件
    //     }
    //   )
    // )

    // 在当前页面加载完成后prefetch可以帮助加载未来需要访问的页面，然而当页面太多时，内容过于庞大时你会有过多async chunk，会导致太多无意义的请求
    config.plugins.delete('prefetch')

    config.module.rule('svg').exclude.add(resolve('src/icons')).end()
    config
      .module
      .rule('icons')
      .test(/\.svg$/)
      .include
      .add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()

    config
      .when(process.env.NODE_ENV !== 'development',
        config => {
          config
            .plugin('ScriptExtHtmlWebpackPlugin')
            .after('html')
            .use('script-ext-html-webpack-plugin', [{
              // `runtime` must same as runtimeChunk name. default is `runtime`
              inline: /runtime\..*\.js$/
            }])
            .end()
          config
            .optimization.splitChunks({
              chunks: 'all',
              cacheGroups: {
                libs: {
                  name: 'chunk-libs',
                  test: /[\\/]node_modules[\\/]/,
                  priority: 10,
                  chunks: 'initial' // 仅最初依赖的第三方
                },
                'element-ui': {
                  name: 'chunk-element-plus',
                  test: /[\\/]node_modules[\\/]_?element-plus(.*)/,
                  priority: 20
                },
                commons: {
                  name: 'chunk-commons',
                  test: resolve('src/components'), // 可以定义自己的规则
                  minChunks: 3,
                  priority: 5,
                  reuseExistingChunk: true
                }
              }
            })
          // https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk
          config.optimization.runtimeChunk('single')
        }
      )
  }
}
